<template>

    <tiny-layout class="tiny-layout-tag1">
      <tiny-row :flex="true" :gutter="10">
        <tiny-col :span="4" :no="3">
          <div class="col">
            <div>{{ data.shortcutMenu.name }}</div>
            <tiny-divider border-style="dashed"></tiny-divider>
            <tiny-row :flex="true" :gutter="10">
              <template v-for="(cell, index) in data.shortcutMenu.data">
                <tiny-col class="cell" :span="3" :no="index" v-if="index < 4">
                  <div class="cell-item"><yu-icon :iconName="cell.icon"></yu-icon></div>
                  <div class="cell-name">{{ cell.name }}</div>
                </tiny-col>
              </template>
            </tiny-row>
            <tiny-row :flex="true" :gutter="10">
              <template v-for="(cell, index) in data.shortcutMenu.data">
                <tiny-col class="cell" :span="3" :no="index" v-if="index >= 4 && index < 8">
                  <div class="cell-item"><yu-icon :iconName="cell.icon"></yu-icon></div>
                  <div class="cell-name">{{ cell.name }}</div>
                </tiny-col>
              </template>
            </tiny-row>
          </div>
        </tiny-col>
        <tiny-col :span="4" :no="1">
          <div>任务</div>
          <tiny-divider border-style="dashed"></tiny-divider>

          <div class="col">2</div>
        </tiny-col>
        <tiny-col :span="4" :no="1">
          <div class="rightDiv">2</div>
        </tiny-col>
      </tiny-row>
    </tiny-layout>

</template>

<script setup>
import { reactive, onBeforeMount, onMounted, getCurrentInstance } from 'vue';
let { proxy } = getCurrentInstance();


const data = reactive({
  activeTab: [],
  shortcutMenu: {},
  tasks: {},
});

data.shortcutMenu = {
  name: '快捷菜单',
  data: [
    { name: '首页1', icon: 'gongzuotai_workbench' },
    { name: '首页2', icon: 'gongzuotai_workbench' },
    { name: '首页3', icon: 'gongzuotai_workbench' },
    { name: '首页4', icon: 'gongzuotai_workbench' },
    { name: '首页5', icon: 'gongzuotai_workbench' },
    { name: '首页6', icon: 'gongzuotai_workbench' },
    { name: '首页7', icon: 'gongzuotai_workbench' },
    { name: '首页8', icon: 'gongzuotai_workbench' },
  ],
};
data.tasks = {
  name: '代办任务',
  data: [{ name: '代办1', num: '50' }],
  data: [{ name: '代办2', num: '60' }],
  data: [{ name: '代办3', num: '70' }],
  data: [{ name: '代办4', num: '80' }],
};
</script>
<style lang="scss" scoped>
.demo-collapse-wrap {
  .tiny-row {
    height: 25px;
    line-height: 25px;
  }
}

.col {
  height: 200px;

  .cell {
    text-align: center;
    height: 100px;

    .cell-item {
      text-align: center;
      height: 60px;
      margin: 5px;
      line-height: 60px;
      cursor: pointer;
      background: #f8f8f8;

      .svg-icon {
        font-size: 30px;
      }
    }

    .cell-item:hover {
      box-shadow: 2px 0 8px 0 lightgray !important;
    }

    .cell-name {
      font-size: 12px;
      text-align: center;
    }
  }
}
.tiny-divider.tiny-divider--horizontal {
  margin: 10px 0px;
}

.rightDiv {
  height: auto;
  background: red;
}
</style>
